<template>
  <div class="customer">
    <div class="customer_search">
      <div class="control_label">
        <div class="search_list project_list">
          <span class="search_text">代表负责项目：</span>
          <el-select
            v-model="project_id"
            multiple
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="search_list doctor_value">
          <span class="search_text">医生信息：</span>
          <el-input v-model="doctorValue" class="input" placeholder="输入医生姓名、电话"></el-input>
        </div>
        <div class="center">
          <div class="search_list visit_number">
            <span class="search_text">
              <el-tooltip placement="bottom">
                <div slot="content">1、拜访结果=招募成功的电话<br/>
                2、通话时长超过30s的覆盖电话</div>
                <el-button>有效拜访次数：</el-button>
              </el-tooltip>
            </span>
            <el-select v-model="visit_number" placeholder="请选择" clearable>
              <el-option
                v-for="item in visitNumbers"
                :key="item.resourceValue"
                :label="item.resourceItem"
                :value="item.resourceValue">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search_list last_call_time">
          <span class="search_text">上次外呼时间：</span>
          <el-date-picker
            v-model="last_call_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <!--项目标签-->
        <div class="search_list">
          <span class="search_text">项目标签：</span>
          <el-select size="small" multiple collapse-tags v-model="itemLabel" placeholder="请选择">
            <el-option v-for="item in itemLabellList" :key="item.id" :label="item.tagName"
                        :value="item.id"></el-option>
          </el-select>
        </div>
        <!--项目标签>单选下拉-->
        <div style="display: inline-block" v-for="hospital of itemRadioList">
          <div class="search_list" v-if="hospital.tagType =='radio'">
            <span class="search_text">{{ hospital.title }}：</span>
            <el-select size="small" v-model="hospital.val" placeholder="请选择">
              <el-option v-for="item in hospital.list" :key="item.id" :label="item.optionName"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="search_list" v-if="hospital.tagType =='checkbox'">
            <span class="search_text">{{ hospital.title }}：</span>
            <el-select size="small" multiple collapse-tags v-model="hospital.val" placeholder="请选择">
              <el-option v-for="item in hospital.list" :key="item.id" :label="item.optionName"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="search_list" v-if="hospital.tagType =='number'">
            <span class="search_text">{{ hospital.title }}：</span>
            <el-input type="text" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')" size="small"
                      v-model="hospital.minNum"></el-input> -
            <el-input type="text" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')" size="small"
                      v-model="hospital.maxNum"></el-input>
          </div>
          <div class="search_list" v-if="hospital.tagType =='text'" style="display:flex">
            <span class="search_text">{{ hospital.title }}：</span>
            <el-input type="text" size="small" v-model="hospital.val"></el-input>
          </div>
        </div>
        <!--基础标签-->
        <div class="search_list">
          <span class="search_text">基础标签：</span>
          <el-select size="small" multiple collapse-tags v-model="basicLabel" value-key="id" placeholder="请选择">
            <el-option-group
              v-for="group in basicLabelList"
              :key="group.resourceValue"
              :label="group.resourceItem">
              <el-option
                v-for="item of group.options"
                :key="item.id"
                :label="item.tagName"
                :value="item">
              </el-option>
            </el-option-group>
          </el-select>
        </div>
        <!--基础标签>单选下拉-->
        <div style="display: inline-block" v-for="hospital of radioList">
          <div class="search_list" v-if="hospital.tagType =='radio'">
            <span class="search_text">{{ hospital.title }}：</span>
            <el-select size="small" v-model="hospital.val" placeholder="请选择">
              <el-option v-for="item in hospital.list" :key="item.id" :label="item.optionName"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="search_list" v-if="hospital.tagType =='checkbox'">
            <span class="search_text">{{ hospital.title }}：</span>
            <el-select size="small" multiple collapse-tags v-model="hospital.val" placeholder="请选择">
              <el-option v-for="item in hospital.list" :key="item.id" :label="item.optionName"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="search_list" v-if="hospital.tagType =='number'">
            <span class="search_text">{{ hospital.title }}：</span>
            <el-input type="text" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')" size="small"
                      v-model="hospital.minNum"></el-input> -
            <el-input type="text" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')" size="small"
                      v-model="hospital.maxNum"></el-input>
          </div>
          <div class="search_list" v-if="hospital.tagType =='text'" style="display:flex">
            <span class="search_text">{{ hospital.title }}：</span>
            <el-input type="text" size="small" v-model="hospital.val"></el-input>
          </div>
        </div>
      </div>
      <div class="dynamic_label">
        <div class="option" v-for="item in showBasicLabel" :key="item.id">
          <!-- 输入框 -->
          <div class="search_list input" v-if="item.type === 'text'">
            <span class="search_text">{{item.name}}：</span>
            <el-input placeholder="输入医院名称" v-if="item.name === '医院名称'"></el-input>
            <el-input placeholder="输入科室" v-if="item.name === '科室'"></el-input>
          </div>
          <!-- 数字区间输入框 -->
          <div class="search_list interval" v-if="item.type === 'number'">
            <span class="search_text">{{item.name}}：</span>
            <div class="interval_input" v-if="item.name === '床位数'">
              <el-input placeholder="输入数字"></el-input>
              <span>-</span>
              <el-input placeholder="输入数字"> </el-input>
            </div>
          </div>
          <!-- 单选下拉框 -->
          <div class="search_list radio" v-if="item.type === 'radio'">
            <span class="search_text">{{item.name}}：</span>
            <el-select placeholder="请选择">
              <el-option></el-option>
            </el-select>
          </div>
          <!-- 多选下拉框 -->
          <div class="search_list checkbox" v-if="item.type === 'checkbox'">
            <span class="search_text">{{item.name}}：</span>
            <el-select
              multiple
              collapse-tags
              filterable
              placeholder="输入关键词选择">
              <el-option>
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="fast_label">
        <div class="search_list">
          <span class="search_text">快捷筛选：</span>
          <el-checkbox v-model="today_visti" :true-label="today_visti_item['resourceValue']" border>{{today_visti_item['resourceItem']}}</el-checkbox>
          <el-checkbox v-model="today_not_call" :true-label="today_not_call_item['resourceValue']" border>{{today_not_call_item['resourceItem']}}</el-checkbox>
          <el-checkbox v-model="not_visit" :true-label="not_visit_item['resourceValue']" border>{{not_visit_item['resourceItem']}}</el-checkbox>
        </div>
      </div>
    </div>
    <div class="customer_list">
      <div class="customer_head">
        <div class="call">
          <el-input v-model="phone" placeholder="请输入电话号码"></el-input>
          <el-button type="primary" @click="call_phone">拨打</el-button>
        </div>
        <div class="search_button">
          <el-button type="primary" @click="search_customer_list">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>
      <el-table
        :data="customer_list"
        style="width: 100%"
        :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
        :row-class-name="tableRowClassName">
        <el-table-column
          label="拨打电话"
          min-width="80"
          fixed>
          <template slot-scope="scope">
            <el-button
              class="submit"
              type="primary"
              @click="call(scope.row)">
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="doctorId"
          label="医生VRID"
          min-width="83">
        </el-table-column>
        <el-table-column
          prop="doctorHospital"
          label="医生信息"
          min-width="140">
          <template slot-scope="scope">
            <div class="info info_align">
              <span
                class="info_text doctor_name"
                style="cursor: pointer;"
                @click="getDoctorInfo(scope.row)">
                <span style="color:rgba(51, 51, 51, 0.5)">姓名：</span>
                <span style="color:rgba(72, 128, 204, 1)">{{scope.row.doctorName}}</span>
              </span>
            </div>
            <div class="info info_align">
              <span class="info_text doctor_tech"><span style="color:rgba(51, 51, 51, 0.5)">职称：</span>{{scope.row.techTitle}}</span>
            </div>
            <div class="info info_align">
              <span class="info_text doctor_level"><span style="color:rgba(51, 51, 51, 0.5)">职务：</span>{{scope.row.executeTitle}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="doctorDept"
          label="医院-科室"
          min-width="150">
          <template slot-scope="scope">
            <div class="info info_align">
              <span class="info_text doctor_name"><span style="color:rgba(51, 51, 51, 0.5)">医院：</span>{{scope.row.doctorHospital}}</span>
            </div>
            <div class="info info_align">
              <span class="info_text doctor_tech"><span style="color:rgba(51, 51, 51, 0.5)">科室：</span>{{scope.row.doctorDept}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="productName"
          label="医生所在项目"
          min-width="150">
          <template slot-scope="scope">
            <div class="info info_align" v-for="(item,index) in scope.row.doctorProductResponse" :key="index">
              <span class="info_text doctor_name">{{item.doctorProductName}}，<span :style="{backgroundColor:item.bgcolor,color:item.color}">{{item.isRecruit}}</span></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="isRecruit"
          label="上次拜访"
          min-width="170">
          <template slot-scope="scope">
            <div class="info info_align">
              <span class="info_text doctor_name"><span style="color:rgba(51, 51, 51, 0.5)">项目：</span>{{scope.row.callRecordProductLast ? scope.row.callRecordProductLast : '无'}}</span>
            </div>
            <div class="info info_align">
              <span class="info_text doctor_tech"><span style="color:rgba(51, 51, 51, 0.5)">时间：</span>{{scope.row.callEndTimeLast}}</span>
            </div>
            <div class="info info_align">
              <span class="info_text doctor_tech"><span style="color:rgba(51, 51, 51, 0.5)">通话时长：</span>{{scope.row.callDurationLast}}<span v-if="scope.row.callDurationLast">s</span></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="上次拜访详情"
          min-width="120">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.callRecordResultLast && scope.row.callRecordResultLast.length > 2"
              placement="top"
              trigger="hover">
              <div>
                <div class="info info_align">
                  <span class="info_text doctor_name">代表：{{scope.row.repNameLast}}</span>
                </div>
                <div class="info info_align">
                  <span class="info_text doctor_tech">拜访结果：{{scope.row.callRecordResultLast ? scope.row.callRecordResultLast : '无'}}</span>
                </div>
              </div>
              <div slot="reference" style="curosr:pointer">
                <div class="info info_align">
                  <span class="info_text doctor_name">代表：{{scope.row.repNameLast}}</span>
                </div>
                <div class="info info_align">
                  <span class="info_text doctor_tech">拜访结果：{{scope.row.callRecordResultLast ? scope.row.callRecordResultLast.slice(0,2)+'...' : '无'}}</span>
                </div>
              </div>
            </el-popover>
            <div v-else>
              <div class="info info_align">
                <span class="info_text doctor_name">代表：{{scope.row.repNameLast}}</span>
              </div>
              <div class="info info_align">
                <span class="info_text doctor_tech">拜访结果：{{scope.row.callRecordResultLast ? scope.row.callRecordResultLast : '无'}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
    </div>
    <!-- 侧边弹框 -->
    <drawer/>

    <!-- 拨打电话 -->
    <phone ref="callPhone"/>
  </div>
</template>

<script>
  import {api, baseAjax} from '../../api/api';
  import Cookies from 'js-cookie';
  import {statusCode} from '../../utils/index';
  import pagination from '../public/pagination';
  import {mapMutations, mapState} from "vuex";
  import {formatDate} from '../../utils/validate';
  import bus from '../../assets/js/eventBus';
  import {checkPhoneNumber} from '../../utils/validate';
  import phone from '../../element/phone';
  import EncryUtil from "@/utils/encrypt";
  import drawer from '../../element/drawer';

  export default {
    components:{
      pagination,
      phone,
      drawer
    },
    computed: {
      ...mapState({
        'loading': state => state.calls.loading
      })
    },
    data() {
      return {
        projectList:[],   //项目下拉框值
        selectedBasicLabel:[],   //选中的基础标签值
        showBasicLabel:[],
        projectLabel:[],    //项目标签下拉框值
        visitNumbers:[],   //有效拜访次数下拉框值
        selectedProjectLabel:[],  //选中的项目标签
        project_id:[],   //选中项目的值
        last_call_time:'',   //上次外呼时间
        doctorValue:'',   //搜索
        visit_number:'',   //有效拜访次数
        tagBasicLabel:[],   //选择基础标签后的筛选项
        tagProjectLabel:[],   //选择项目标签后的筛选项
        today_visti_item:{},
        today_not_call_item:{},
        not_visit_item:{},
        today_visti:'',  //计划今日拜访
        today_not_call:'',   //今日未拨打
        not_visit:'',   //新转入未拜访
        customer_list:[],  //我的医生列表
        user_info:{},
        phone:'',  //手机号
        doctor_info:{},  //侧边弹框医生信息
        doctors_info:{},  //外呼确认弹框医生信息
        page:{
          currentPage:1,    //当前页
          pageSize:10,    //每页显示条数
          totalPage:null,   //总页数
          total:null   //总条数
        },
        /*基础标签*/
        basicLabel: [],
        basicLabelList: [],
        /*基础标签>单选下拉*/
        radioList: [],
        /*项目标签*/
        itemLabel: [],
        itemLabellList: [],
        //项目标签-下拉选中值
        itemRadioList:[]
      }
    },
    mounted(){
      this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
      this.getMyCustomerList();
      this.getFastLabel();  //获取快捷标签
      this.getVisitNumber();  //获取有效拜访次数
      this.getAllProductInfo();  //获取所有项目
      this.getBasicLabel();
    },
    created(){

    },
    watch:{
      //项目联动 - 项目成员、项目标签
      project_id() {
        if (this.project_id.length > 0) {
          this.itemLabel = [];
          this.tag_product_info_list()
        } else {
          this.itemLabel = []
          this.itemLabellList = []
        }
      },
      itemLabel(){
        if(this.itemLabel.length > 0){
          this.itemLabel.map(data=>{
            this.tag_option_info_product(data);
          });
        }else{
          this.itemRadioList = [];
        }
      },
      //基础标签 >类型标签
      basicLabel() {
        if (this.basicLabel.length > 0) {
          this.basicLabel.map((data) => {
            this.tag_base_option_list(data.id, data.tagName, data.tagType)
          })
        } else {
          this.radioList = []
        }
      },
    },
    methods:{
      ...mapMutations({
        phone_call: 'calls/callPhone',
      }),
      //修改列表tr颜色
      tableRowClassName({row,rowIndex}){
        if(rowIndex % 2 === 1){
          return 'success_row';
        }
        return '';
      },
      //获取所有项目
      getAllProductInfo() {
        let that = this;
        api.get_product_by_id = {
          url:api.get_product_by_id_url + this.user_info.repId+'/0',
          method:api.get_product_by_id.method
        };
        baseAjax(api.get_product_by_id, '', (res) => {
          if (res.code === statusCode.success) {
            that.projectList = res.data;
          }
        })
      },

      //获取基础标签
      getBasicLabel(){
        let tag_base_info = {
          url: '/tag_base/tag_base_info',
          method: 'POST'
        }
        baseAjax(tag_base_info, {}, (res) => {
          if (res.code == statusCode.success) {
            let arr = [];
            res.data.tagBaseList.map((res) => {
              let data = {
                resourceValue: res.tagClassifyId,
                resourceItem: res.tagClassifyName,
              }
              arr.push(data)
            })
            let tag = this.unique(arr);
            tag.map((res2) => {
              let value = []
              res.data.tagBaseList.map((res1) => {
                if (res1.tagClassifyId == res2.resourceValue) {
                  value.push(res1)
                }
              })
              res2.options = value
              this.basicLabelList.push(res2)
            })
          }
        })
      },
      //数组对象去重
      unique(arr) {
        const res = new Map();
        return arr.filter((arr) => !res.has(arr.resourceValue) && res.set(arr.resourceValue, 1));
      },
      //查看基础标签选项信息
      tag_base_option_list(id, tagName, tagType) {
        this.radioList = []
        let tag_base_option_list = {
          url: '/tag_base/tag_base_option_list?tagIds=' + id,
          method: 'GET'
        }
        baseAjax(tag_base_option_list, '', (res) => {
          if (res.code == statusCode.success) {
            if (tagType == 'checkbox') {
              let checkbox = {
                tagId : id,
                tagType: 'checkbox',
                title: tagName,
                list: [],
                val: []
              }
              res.data.map((res) => {
                if (res.tagType == 'checkbox') {
                  res.minNum = '';
                  res.maxNum = '';
                  res.optionId = res.id;
                  checkbox.list.push(res)
                }
              })
              this.radioList.push(checkbox)
            }

            if (tagType == 'radio') {
              let radio = {
                tagId:id,
                tagType: 'radio',
                title: tagName,
                list: [],
                val: '',
              }
              res.data.map((res) => {
                if (res.tagType == 'radio') {
                  res.minNum = '';
                  res.maxNum = '';
                  res.optionId = res.id;
                  radio.list.push(res)
                }
              })
              this.radioList.push(radio)
            }

            if (tagType == 'number') {
              let number = {
                minNum: '',
                maxNum:'',
                optionId:0,
                optionName: '',
                tagId:id,
                tagType: 'number',
                title: tagName,
                list: [],
                val: '',
              }
              res.data.map((res) => {
                if (res.tagType == 'number') {
                  number.list.push(res)
                }
              })
              this.radioList.push(number)
            }

            if (tagType == 'text') {
              let text = {
                minNum: '',
                maxNum:'',
                optionId:0,
                optionName: '',
                tagId:id,
                tagType: 'text',
                title: tagName,
                list: [],
                val: '',
              }
              res.data.map((res) => {
                if (res.tagType == 'number') {
                  text.list.push(res)
                }
              })
              this.radioList.push(text)
            }
          }
        })
      },
      //查看项目标签-项目联动->项目标签
      tag_product_info_list() {
        let a = {
          url: api.tag_product_info_list.url + '?productIds=' + this.project_id,
          method: api.tag_product_info_list.method
        }
        baseAjax(a, '', (res) => {
          if (res.code == statusCode.success) {
            this.itemLabellList = res.data
          }
        })
      },
      //查看项目标签选项信息
      tag_option_info_product(id){
        this.itemRadioList = [];
        let tag_product_option_list = {
          url: '/tag_product/tag_option_info_product?tagId=' + id,
          method: 'GET'
        }
        baseAjax(tag_product_option_list, '', (res) => {
          if (res.code == statusCode.success) {

            if (res.data.tagType == 'checkbox') {
              let checkbox = {
                tagId : res.data.id,
                tagType: 'checkbox',
                title: res.data.tagName,
                list: [],
                val:[]
              }
              res.data.tagProductOptionBeanList.map((val) => {
                val.maxNum = '';
                val.minNum = '';
                val.tagType = 'checkbox';
                val.tagId = res.data.id;
                val.optionId = val.id;
                checkbox.list.push(val);
              })
              this.itemRadioList.push(checkbox);
            }

            if (res.data.tagType == 'radio') {
              let radio = {
                tagId:res.data.id,
                tagType: 'radio',
                title: res.data.tagName,
                list: [],
                val:''
              }
              res.data.tagProductOptionBeanList.map((val) => {
                val.maxNum = '';
                val.minNum = '';
                val.tagType = 'radio';
                val.tagId = res.data.id,
                val.optionId = val.id;
                radio.list.push(val);
              })
              this.itemRadioList.push(radio)
            }

            if (res.data.tagType == 'number') {
              let number = {
                minNum: '',
                maxNum:'',
                optionId:0,
                optionName: '',
                tagId:res.data.id,
                tagType: 'number',
                title: res.data.tagName,
                list: [],
                val:''
              }
              this.itemRadioList.push(number)
            }

            if (res.data.tagType == 'text') {
              let text = {
                maxNum:'',
                minNum:'',
                optionId:0,
                optionName: '',
                tagId:res.data.id,
                tagType: 'text',
                title: res.data.tagName,
                list: [],
                val:''
              }
              this.itemRadioList.push(text)
            }
          }
        })
      },
      //获取快捷标签
      getFastLabel(){
        let that = this;
        api.get_resource_item = {
          url:api.get_resource_item_url +'quick_tag',
          method:api.get_resource_item.method
        }
        baseAjax(api.get_resource_item, '', (res)=>{
          if(res.code === statusCode.success){
            that.today_visti_item = res.data[0];
            that.today_not_call_item = res.data[1];
            that.not_visit_item = res.data[2];
          }
        });
      },
      //获取有效拜访次数
      getVisitNumber(){
        let that = this;
        api.get_resource_item = {
          url:api.get_resource_item_url +'active_visit_times',
          method:api.get_resource_item.method
        }
        baseAjax(api.get_resource_item, '', (res)=>{
          if(res.code === statusCode.success){
            that.visitNumbers = res.data;
          }
        });
      },
      //获取我的客户列表数据
      getMyCustomerList(){
        let that = this;
        let doctorInfo = {
          currentPage:this.page.currentPage,
          pageSize:this.page.pageSize,
          totalPage:this.page.totalPage,
          dept:'',
          doctorValue:this.doctorValue,
          effectiveVisitTimes:this.visit_number,
          startTime:this.last_call_time && this.last_call_time.length? formatDate(this.last_call_time[0]) : '',
          endTime:this.last_call_time && this.last_call_time.length? formatDate(this.last_call_time[1]) : '',
          hco:'',
          notCall:this.not_visit ? 1 : 0,
          productId:this.project_id === [] ? '' : this.project_id,
          repId:this.user_info.repId,
          // tagBaseList:[],
          // tagProductList:[],
          todayPlabDate:this.today_visti ? this.getTodayTime('plan') : '',
          todaytime:this.today_not_call ? this.getTodayTime(null) : '',
          tagBaseList:this.basicLabelResult(),
          tagProductList:this.projectLabelResult(),
        };
        baseAjax(api.get_my_doctor_info, doctorInfo, (res)=>{
          if(res.code === statusCode.success){
            let {currentPage, pageSize, totalPage, count, value} = res.data;
            that.page.currentPage = currentPage;
            that.page.pageSize = pageSize;
            that.page.totalPage = totalPage;
            that.page.total = count;
            that.customer_list = value;
            that.customer_list.forEach(item=>{
              item.doctorProductResponse.forEach(val=>{
                if(val.isRecruit === '未招募'){
                  val.bgcolor = 'rgba(145, 147, 152, 0.2)';
                  val.color = 'rgba(145, 147, 152, 1)';
                }else if(val.isRecruit === '成功招募'){
                  val.bgcolor = 'rgba(26, 179, 148, 0.2)';
                  val.color = 'rgba(26, 179, 148, 1)';
                }else if(val.isRecruit === '退出项目'){
                  val.bgcolor = 'rgba(238, 0, 0, 0.2)';
                  val.color = 'rgba(238, 0, 0, 1)';
                }
              });
              item.doctorContact = item.doctorContact ? item.doctorContact.split(',') : '';
            });
          }else if(res.code === statusCode.not_login){
            that.$alert('用户未登录,请重新登录').then(()=>{
              that.$store.dispatch('user/resetToken').then(()=>{
                location.reload()  // 为了重新实例化vue-router对象 避免bug
              })
              that.$router.replace('/login');
            });
          }
        });
      },
      //基础标签筛选结果
      basicLabelResult(){
        let basic_label = [];
        this.radioList.map((item)=>{
          if(item.tagType == 'text'){
            let text = {
              maxNum : item.maxNum,
              minNum : item.minNum,
              optionId : item.optionId,
              optionName : item.val,
              tagId : item.tagId,
              tagType : item.tagType
            };
            basic_label.push(text);
          }

          if(item.tagType == 'number'){
            let number = {
              maxNum : item.maxNum,
              minNum : item.minNum,
              optionId : item.optionId,
              optionName : item.optionName,
              tagId : item.tagId,
              tagType : item.tagType
            };
            basic_label.push(number);
          }

          if(item.tagType == 'radio'){
            let radio = {};
            item.list.forEach(value=>{
              if(item.val == value.optionId){
                radio = {
                  maxNum : value.maxNum,
                  minNum : value.minNum,
                  optionId : value.optionId,
                  optionName : value.optionName,
                  tagId : value.tagId,
                  tagType : value.tagType
                };
              }
            });
            basic_label.push(radio);
          }

          if(item.tagType == 'checkbox'){
            let checkbox = [];
            item.val.forEach(check => {
              item.list.map(value=>{
                if(check == value.optionId){
                  checkbox.push({
                    maxNum : value.maxNum,
                    minNum : value.minNum,
                    optionId : value.optionId,
                    optionName : value.optionName,
                    tagId : value.tagId,
                    tagType : value.tagType
                  });
                }
              });
            });
            basic_label.push(checkbox);
          }
        });
        return basic_label.flat();
      },
      //项目标签筛选结果
      projectLabelResult(){
        let project_label = [];
        this.itemRadioList.map((item)=>{
          if(item.tagType == 'text'){
            let text = {
              maxNum : item.maxNum,
              minNum : item.minNum,
              optionId : item.optionId,
              optionName : item.val,
              tagId : item.tagId,
              tagType : item.tagType
            };
            project_label.push(text);
          }

          if(item.tagType == 'number'){
            let number = {
              maxNum : item.maxNum,
              minNum : item.minNum,
              optionId : item.optionId,
              optionName : item.optionName,
              tagId : item.tagId,
              tagType : item.tagType
            };
            project_label.push(number);
          }

          if(item.tagType == 'radio'){
            let radio = {};
            item.list.forEach(value=>{
              if(item.val == value.optionId){
                radio = {
                  maxNum : value.maxNum,
                  minNum : value.minNum,
                  optionId : value.optionId,
                  optionName : value.optionName,
                  tagId : value.tagId,
                  tagType : value.tagType
                };
              }
            });
            project_label.push(radio);

          }

          if(item.tagType == 'checkbox'){
            let checkbox = [];
            item.val.forEach(check => {
              item.list.map(value=>{
                if(check == value.optionId){
                  checkbox.push({
                    maxNum : value.maxNum,
                    minNum : value.minNum,
                    optionId : value.optionId,
                    optionName : value.optionName,
                    tagId : value.tagId,
                    tagType : value.tagType
                  });
                }
              });
            });
            project_label.push(checkbox);
          }
        });

        return project_label.flat();
      },
      //搜索客户信息
      search_customer_list(){
        this.getMyCustomerList();
      },
      //改变当前页码
      handleCurrentChange(currentPage){
        this.page.currentPage = currentPage;
        this.getMyCustomerList();
      },
      //改变每页条数
      handlePageSize(pageSize){
        this.page.pageSize = pageSize;
        this.getMyCustomerList();
      },
      //重置搜索列表
      resetSearch(){
        this.project_id = [];
        this.selectedBasicLabel = [];
        this.showBasicLabel = [];
        this.selectedProjectLabel = [];
        this.last_call_time = '';
        this.doctorValue = '';
        this.visit_number = '';
        this.today_visti = '';
        this.today_not_call = '';
        this.not_visit = '';
        this.basicLabel = [];
        this.basicLabelList =  [];
        this.radioList = [];
        this.itemLabel =  [];
        this.itemLabellList = [];
        this.itemRadioList = [];
      },
      //获取当前时间
      getTodayTime(type){
        let time = new Date();
        let year = time.getFullYear();
        let month = time.getMonth()+1;
        let day = time.getDate();
        let hours = time.getHours();
        let minute = time.getMinutes();
        let seconds = time.getSeconds();
        if(type === 'plan'){
          return year+'-'+month+'-'+day;
        }else{
          return year+'-'+month+'-'+day+' 00:00:00';
        }
      },
      //搜索-拨打电话
      call_phone(){
        let that = this;
        if(!this.phone){
          this.$alert('请输入手机号');
        }else if(!checkPhoneNumber(this.phone)){
          this.$alert('号码有误');
        }else{
          api.search_phone = {
            url:api.search_phone_url + '?repId='+this.user_info.repId+'&doctorContact='+this.phone,
            method:api.search_phone.method
          }
          baseAjax(api.search_phone, '', (res)=>{
            if(res.code === statusCode.success){
              if(res.data === 1){
                that.$alert('此医生已在你的客户中，已有医生必须通过列表外呼');
              }else if(res.data === 2){
                that.$alert('此医生由其他代表覆盖，请勿拜访他人的医生');
              }else if(res.data === 0){
                this.$refs.callPhone.enrolment_call();
                bus.$emit('getDoctorPhone', that.phone);
              }
            }
          });
        }
      },
      //列表-拨打电话
      call(info){
        this.$refs.callPhone.is_phone_call();
        this.doctors_info = info;
        bus.$emit('getDoctorDetail',this.doctors_info);
        this.dealDoctorInfo(info);
        Cookies.set('doctor_info', this.EncryUtil.encryptByAES(JSON.stringify(this.doctor_info)), {expires: 24 * 60 * 60 * 1000});
      },
      //获取医生信息
      getDoctorInfo(info){
        this.dealDoctorInfo(info);
        Cookies.set('doctor_info', this.EncryUtil.encryptByAES(JSON.stringify(this.doctor_info)), {expires: 24 * 60 * 60 * 1000});
        let data = {
            is_drawer:true,   //是否显示侧边弹框 true-显示 false-隐藏
            is_supplement:true  //是否显示补填信息按钮  true-显示  false-隐藏
        };
        bus.$emit('get_doctor_info',data);
      },
      //处理医生信息
      dealDoctorInfo(info){
        this.doctor_info = {
          name:info.doctorName,
          position:info.techTitle,
          hospital:info.doctorHospital,
          department:info.doctorDept,
          sex:info.gender,
          project:[],
          doctorId:info.doctorId,
          techTitle:info.techTitle,
          executeTitle:info.executeTitle,
          hcoProvince:info.hcoProvince,
          hcoCity:info.hcoCity,
          concat:info.doctorContact
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .customer{
    /deep/.el-input.el-input--suffix.is-focus>.el-input__inner{
      border-color:#2A82E2;
    }
    /deep/.el-input__inner:focus{
      border-color:#2A82E2 !important;
    }
    /deep/.el-range-editor.is-active{
      border-color:#2A82E2 !important;
    }
    .customer_search{
      width: 100%;
      background-color: #FFFFFF;
      border-radius: 2px;
      margin-bottom: 16px;
      padding: 24px 16px 12px 16px;
      box-sizing: border-box;
      border-radius: 2px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      .search_list{
        display:flex;
        margin-bottom:14px;
        align-items:center;
        .search_text{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          min-width: 98px;
        }
        /deep/.el-input__inner{
          height: 32px;
          border-radius: 2px;
          border: 1px solid #DDDFE6;
        }
      }
      .control_label{
        .search_list,.center{
          display: inline-block;
          margin-right: 15px;
        }
        /deep/.el-select,.input{
          width: 200px;
          .el-input__suffix{
            .el-input__suffix-inner{
              .el-input__icon{
                line-height:32px;
              }
            }
          }
        }
        /deep/.el-date-editor{
          .el-range-separator{
            line-height:25px;
          }
          .el-range__icon{
            line-height:27.5px;
          }
          .el-range__close-icon{
            line-height:27px;
          }
        }
        .visit_number{
          .search_text{
            .el-button{
              color:#303133;
              border-color: transparent;
              padding:0;
            }
            .el-button:hover,.el-button:focus{
              background-color:transparent;
              color:#303133;
            }
          }
        }
        .search_text{
          min-width:70px;
        }



/*        //display:flex;
        .left,.center,.right{
          //width:100%;

        }
        .left,.center{
          margin-right:24px;
        }
        */
      }
      .dynamic_label{
        display:flex;
        flex-wrap:wrap;
        .option{
          display:flex;
          .input{
            .el-input{
              width:180px;
            }
          }
          .interval{
            .interval_input{
              display:flex;
              /deep/.el-input{
                width:104px;
              }
              span{
                margin:7px 5px 0 5px;
              }
            }
          }
          /deep/.el-select{
            width:151px;
          }
          .search_list{
            margin-right:13px;
          }
        }
      }
      .fast_label{
        justify-content:space-between;
        /deep/.el-checkbox{
          height:32px;
          position:relative;
          margin-right:20px;
          .el-checkbox__label{
            transform:translateY(-3px);
          }
          .el-checkbox__input{
            position:absolute;
            right:0;
            bottom:9px;
            .el-checkbox__inner{
              border-color:transparent;
            }
          }
          .el-checkbox__input.is-checked .el-checkbox__inner{
            border: 10px solid transparent;
            border-right:10px solid rgba(42, 130, 226, 1);
            border-top:10px solid rgba(42, 130, 226, 1);
            border-top-left-radius: 0;
            border-bottom-right-radius: 0;
            width: 0;
            background-color: transparent;
          }
          .el-checkbox__inner::after{
            width: 6px;
            height: 8px;
            left: -1px;
            top: -10px;
          }
          .el-checkbox__input.is-checked+.el-checkbox__label{
            color:rgba(42, 130, 226, 1);
          }
        }
        .el-checkbox.is-bordered+.el-checkbox.is-bordered{
          margin-left:0;
        }
        .el-checkbox.is-bordered.is-checked{
          border-color:transparent;
          background-color:rgba(42, 130, 226, 0.1);
        }
        .el-checkbox.is-bordered{
          border-radius:2px;
        }
        .search_text{
          min-width:70px;
        }
      }
    }
    .customer_list{
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      background-color:#fff;
      padding:24px 16px 0;
      display:flex;
      flex-direction:column;
      border-radius:2px;
      box-sizing:border-box;
      margin-bottom:20px;
      .customer_head{
        display:flex;
        justify-content:space-between;
        margin-bottom:17px;
        .call{
          display:inline-flex;
          /deep/.el-input{
            margin-right:12px;
            .el-input__inner{
              width: 220px;
              height: 32px;
              border-radius: 2px;
              border: 1px solid #DDDFE6;
            }
          }
          .el-button{
            width: 64px;
            height: 32px;
            background-color: rgba(42, 130, 226, 1);
            border-radius: 2px;
            display:flex;
            justify-content:center;
            align-items: center;
            border-color:transparent;
            background-image:url('../../assets/common/call.svg');
            background-repeat:no-repeat;
            background-position:10px center;
            padding-left:39px;
            box-sizing:border-box;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.9);
          }
          .el-button:hover{
            background-color: rgba(42, 130, 226, 0.7);
          }
          .el-button:active{
            background-color: #1F6DC3;
          }
        }
        .search_button{
          display:inline-flex;
          .el-button{
            width: 64px;
            height: 32px;
            background: rgba(42, 130, 226, 1);
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-color:transparent;
          }
          button:first-child{
            background: rgba(42, 130, 226, 1);
            border-radius: 2px;
            color: rgba(255, 255, 255, 0.9);
          }
          button:first-child:hover{
            background-color:rgba(42, 130, 226, 0.7);
          }
          button:first-child:active{
            background-color: #1F6DC3;
          }
          button:last-child{
            background-color: #FFFFFF;
            border-radius: 2px;
            border: 1px solid #DDDFE6;
            color:rgba(0, 0, 0, 0.7);
            margin-left:8px;
          }
          button:last-child:hover{
            color: #2A82E2;
          }
        }
      }
      /deep/.el-table{
        color: #3B4859;
        border-top: 1px solid #ECEEF5;
        border-left:1px solid #ECEEF5;
        border-right:1px solid #ECEEF5;
        border-radius: 2px;
        // .success_row{
        //   background-color:#F8F9FB !important;
        // }
        thead{
          tr{
            th{
              .cell{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
              }
            }
            th:first-child{
              .cell{
                margin-left:8px;
              }
            }
          }
        }
        tbody {
          tr{
            padding:10px 0;
            td{
              height:93px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              padding:0;
              .cell{
                .info{
                  text-align:left;
                }
                .el-button{
                  margin-left:21px;
                  width: 30px;
                  height: 30px;
                  background-color: rgba(42, 130, 226, 1);
                  border-radius:50%;
                  border-color:transparent;
                  border:0;
                  padding:0;
                  background-image:url('../../assets/common/call.svg');
                  background-repeat:no-repeat;
                  background-position:center center;
                }
                .el-button:hover{
                  background-color: rgba(42, 130, 226, 0.7);
                }
                .el-button:active{
                  background-color: #1F6DC3;
                }
              }
            }
            td:nth-child(5){
              .cell{
                div{
                  span{
                    span{
                      padding:2px 8px;
                    }
                  }
                }
                div:first-child{
                  margin-bottom:4px;
                }
                div:last-child{
                  margin-top:4px;
                }
              }
            }
          }
        }

        .cell{
          .name-wrapper{
            span{
              color:#000;
            }
          }
        }
      }

      /deep/.el-table--striped .el-table__body tr.el-table__row--striped td{
        background:none;
      }
    }
  }

  .basic_label_group{
    .el-scrollbar{
      .el-scrollbar__wrap{
        .el-scrollbar__view{
          .el-select-group__wrap{
            .el-select-group__title{
              padding-left:11px;
              font-size: 14px;
              color: #606266;
              font-weight: bold;
            }
          }
          .el-select-group__wrap:not(:last-of-type){
            padding-bottom:0;
          }
          .el-select-group__wrap:not(:last-of-type)::after{
            background-color:transparent;
          }
        }
      }
    }
  }

</style>
